<template>
  <div ref="animation" :style="{ width, height }"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import lottie from 'lottie-web'

export default defineComponent({
  name: 'Lottie',
  props: {
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    },
    src: {
      type: String,
      default: 'https://assets10.lottiefiles.com/packages/lf20_dyiqnus5.json'
    },
    jsonData: {
      type: Object,
      default: () => null
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    loop: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    let animation = ref<null | HTMLElement>(null)

    onMounted(() => {
      if (animation.value) {
        lottie.loadAnimation({
          container: animation.value,
          renderer: 'svg',
          loop: props.loop,
          autoplay: props.autoplay,
          path: props.src,
          // animationData只能加载本地json，优先级高于path
          animationData: props.jsonData
        })
      }
    })

    return {
      animation
    }
  }
})
</script>

<style scoped lang="scss"></style>
